import React from 'react';
import PropTypes from 'prop-types';
import axios from 'axios';
import {gets} from "../utils/request";
import styles from '../css/Project.css';
import styleLogin from '../css/Login.css';
import ForgetPassword from "./ForgetPassword";

class Login extends React.Component {
    constructor (props, context) {
        super(...arguments);
        this.context.router;
        this.state = {
            form: {
                username: {
                    valid: false,
                    value: '',
                    error: ''
                },
                password: {
                    valid: false,
                    value: 0,
                    error: ''
                }
            }
        };
    }

    handleValueChange (field, value, type = 'string') {


        const {form} = this.state;

        const newFieldObj = {value, valid: true, error: ''};

        switch (field) {
            case 'username': {
                if (value.length != 11) {
                    newFieldObj.error = '您输入的手机号错误';
                    newFieldObj.valid = false;
                } else if (value.length === 0) {
                    newFieldObj.error = '手机号码不能为空';
                    newFieldObj.valid = false;
                }
                break;
            }
            case 'password': {
                if (value.length>16||value.length<6) {
                    newFieldObj.error = '请输入6~16位数字或英文字母密码';
                    newFieldObj.valid = false;
                }
                break;
            }
        }

        this.setState({
            form: {
                ...form,
                [field]: newFieldObj
            }
        });
    }
    testGit()
    {}

    handleSubmit (e) {
        e.preventDefault();
        const {form: {username, password}} = this.state;
        if (!username.valid ) {
            alert(username.error);
            return;
        }else if(!password.valid){
            alert(password.error);
            return;
        }


        axios.defaults.withCredentials = true;
        axios.get('http://guoxue.boyueguoxue.cn/User/login.do?account='+username.value+'&password='+password.value+'&type=1&isChannelUser=1')
            .then(response => {
                let code=response.data.code;
                let message=response.data.message;
                console.log('code'+code);
                console.log(response.data);
                if(code==200){
                    let data=response.data.data;
                    this.context.router.push(  {pathname:'/main/',state:{uid:data.uid,GxToken:data.GxToken,GxSID:data.GxSID}});

                }else {
                    alert(message);
                    return;
                }
            })
            .catch(function (error) {
                alert(error)
            })

    }

    render () {
        const {form: {username, password}} = this.state;
        return (
            <div>
                <header>
                    <title>登录</title>
                </header>
                <div id="headDiv" className={styles["Project-layoutHead"]}></div>
                <div  id="bodyDiv" className={styles["Project-layoutBody"]}>
                    <div id="bodyDivCenter" className={styleLogin["Login-Layout-center"]}>
                    <form  onSubmit={(e) => this.handleSubmit(e)}>
                        <input
                            type="number"
                            className={styleLogin["Login-InputNumberReomve"]}
                            placeholder="请输入11位手机号"
                            value={username.value}
                            onChange={(e) => this.handleValueChange('username', e.target.value)}
                        />
                        {/*{!username.valid && <span>{username.error}</span>}*/}
                        <br/>
                        <input
                            className={styleLogin["Login-inputDefault"]}
                            type="password"
                            placeholder="请输入6~16位数字或英文字母密码"
                            value={password.value || ''}
                            onChange={(e) => this.handleValueChange('password', e.target.value, 'number')}
                        />
                        {/*{!password.valid && <span>{password.error}</span>}*/}
                        <br/>
                        <p>
                        <div className={styleLogin["Login-button-centerDiv"]}>
                            <button  onClick={() => this.resist()}  className={styleLogin["Login-button"]}>注册</button>
                            <button  type='submit' className={styleLogin["Login-buttonRight"]}>登录</button>

                        </div>
                        </p>

                        <p>
                            <div className={styles["Project-bottom"]}>
                                <a href="javascript:void(0);" onClick={() => this.forgetPassword()}>忘记密码</a>
                            </div>
                        </p>
                    </form>
                    </div>
                </div>
            </div>
        );
    }

    resist() {
        this.context.router.push('/user/regist/');
    }


    forgetPassword() {
        this.context.router.push('/ForgetPassword/');
    }
}
Login.contextTypes = {
    router: PropTypes.object.isRequired
};

export default Login;